<template>
    <div>
        <div class="title">编辑文本信息</div>
        <van-field
            :value="value"
            :label="label"
            type="textarea"
            clearable
            placeholder="请输入信息"
            label-class="label"
            input-class="input"
            auto-focus
            center
            autosize
            :border="false"
            @input.native="changeMessage"
        >
            <van-button slot="button" size="small" type="primary" @click="save">
                保存
            </van-button>
        </van-field>
    </div>
</template>

<script>
import vanField from "@/wxcomponents/weapp/dist/field/index";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";

export default {
    props: ["label", "value"],
    data() {
        return { message: "" };
    },
    watch: {
        value(val) {
            this.message = val;
        },
    },
    components: { vanField },
    methods: {
        changeMessage({ detail }) {
            this.message = detail;
        },
        save() {
            if (this.message) {
                this.$emit("save", this.message);
                Notify({
                    type: "success",
                    message: "修改成功",
                    selector: "#editor-notify",
                });
            } else {
                Notify({
                    type: "danger",
                    message: "内容不能为空哦",
                    selector: "#editor-notify",
                });
            }
        },
    },
};
</script>

<style scoped lang="less">
/deep/ .label {
    text-align: center;
    font-weight: bold;
}
/deep/ .input {
    border-bottom: 4rpx solid darkgray;
}

.title {
    width: 100%;
    font-size: 40rpx;
    text-align: center;
    font-weight: bold;
    padding: 32rpx 0;
}
</style>
